<template>
  <div>
    <Portal to="right-disable"
            :disabled="!queryModelDefaultSetting.showSetting">
      <div style="width:100%;">
        <el-card shadow="hover"
                 v-if="gadgetSetting.dateRangeDefaultSetting.show">
          <p style='margin-bottom: 10px;'>
            <span v-if='"" !== gadgetSetting.dateRangeDefaultSetting.name'
                  style='font-size:16px; font-weight: 600'>{{ gadgetSetting.dateRangeDefaultSetting.name }}</span>
            <el-tooltip :open-delay="1000"
                        class="item"
                        effect="dark"
                        :content="gadgetSetting.dateRangeDefaultSetting.description"
                        placement="right"
                        v-if='"" !== gadgetSetting.dateRangeDefaultSetting.description'>
              <i class="cuifont icon_help_circle"
                 style='margin-left:5px;'></i>
            </el-tooltip>
          </p>-
          <!-- <el-form :inline="true">
            <el-form-item v-loading='loading' style="width:100%"> -->
          <div style="display: flex; align-items: center">
            <div style="flex: none;margin-right: 10px" v-if="gadgetSetting.label">{{gadgetSetting.label}}</div>
            <ejs-daterangepicker v-loading='loading'
                                 :placeholder="$t('custom.marketbot.clientUsageReport.selectDate')"
                                 style="width:100%;"
                                 :start="gadgetSetting.dateRangeDefaultSetting.start"
                                 :depth="gadgetSetting.dateRangeDefaultSetting.depth"
                                 :minDays="gadgetSetting.dateRangeDefaultSetting.minDay"
                                 :maxDays="gadgetSetting.dateRangeDefaultSetting.maxDay"
                                 :format="gadgetSetting.dateRangeDefaultSetting.format"
                                 v-model="searchDate"
                                 @change="getDataListParams"
                                 ref="daterange"
                                 :strictMode="gadgetSetting.dateRangeDefaultSetting.selectionMode">
              <e-presets>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.toDay')"
                          :start='gadgetSetting.dateRangeDefaultSetting.toDayStartDate'
                          :end='gadgetSetting.dateRangeDefaultSetting.toDayEndDate'>
                </e-preset>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.yesterDay')"
                          :start='gadgetSetting.dateRangeDefaultSetting.yesterDayStartDate'
                          :end='gadgetSetting.dateRangeDefaultSetting.yesterDayEndDate'>
                </e-preset>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.thisWeek')"
                          :start='gadgetSetting.dateRangeDefaultSetting.weekStartDate'
                          :end='gadgetSetting.dateRangeDefaultSetting.weekEndDate'>
                </e-preset>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastDayMonth')"
                          :start='gadgetSetting.dateRangeDefaultSetting.lastDayMonthStartDate'
                          :end='gadgetSetting.dateRangeDefaultSetting.lastDayMonthEndDate'>
                </e-preset>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastDayQuarter')"
                          :start='gadgetSetting.dateRangeDefaultSetting.lastDayQuarterStartDate'
                          :end='gadgetSetting.dateRangeDefaultSetting.lastDayQuarterEndDate'>
                </e-preset>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastBusinessDayWeek')"
                          :start='gadgetSetting.dateRangeDefaultSetting.weekStartBusinessDate'
                          :end='gadgetSetting.dateRangeDefaultSetting.weekEndBusinessDate'>
                </e-preset>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastBusinessDayMonth')"
                          :start='gadgetSetting.dateRangeDefaultSetting.lastDayMonthStartBusinessDate'
                          :end='gadgetSetting.dateRangeDefaultSetting.lastDayMonthEndBusinessDate'>
                </e-preset>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastBusinessDayQuarter')"
                          :start='gadgetSetting.dateRangeDefaultSetting.lastDayQuarterStartBusinessDate'
                          :end='gadgetSetting.dateRangeDefaultSetting.lastDayQuarterEndBusinessDate'>
                </e-preset>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.currentMonthToToday')"
                          :start='gadgetSetting.dateRangeDefaultSetting.currentMonthToTodayStart'
                          :end='gadgetSetting.dateRangeDefaultSetting.currentMonthToTodayEnd'>
                </e-preset>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.currentSundayToToday')"
                          :start='gadgetSetting.dateRangeDefaultSetting.currentSundayToTodayStart'
                          :end='gadgetSetting.dateRangeDefaultSetting.currentSundayToTodayEnd'>
                </e-preset>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.thisMonth')"
                          :start='gadgetSetting.dateRangeDefaultSetting.monthStartDate'
                          :end='gadgetSetting.dateRangeDefaultSetting.monthEndDate'>
                </e-preset>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastMonth')"
                          :start='gadgetSetting.dateRangeDefaultSetting.lastMonthStartDate'
                          :end='gadgetSetting.dateRangeDefaultSetting.lastMonthEndDate'>
                </e-preset>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastTwelveMonthStartDate')"
                          :start='gadgetSetting.dateRangeDefaultSetting.lastTwelveMonthStartDate'
                          :end='gadgetSetting.dateRangeDefaultSetting.lastTwelveMonthEndDate'>
                </e-preset>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.thisQuarter')"
                          :start='gadgetSetting.dateRangeDefaultSetting.thisQuarterStartDate'
                          :end='gadgetSetting.dateRangeDefaultSetting.thisQuarterEndDate'>
                </e-preset>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastQuarter')"
                          :start='gadgetSetting.dateRangeDefaultSetting.lastQuarterStartDate'
                          :end='gadgetSetting.dateRangeDefaultSetting.lastQuarterEndDate'>
                </e-preset>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.thisYear')"
                          :start='gadgetSetting.dateRangeDefaultSetting.thisYearStartDate'
                          :end='gadgetSetting.dateRangeDefaultSetting.thisYearEndDate'>
                </e-preset>

                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastYear')"
                          :start='gadgetSetting.dateRangeDefaultSetting.lastYearStartDate'
                          :end='gadgetSetting.dateRangeDefaultSetting.lastYearEndDate'>
                </e-preset>
                <e-preset :label="item.label"
                          v-for="(item,index) in gadgetSetting.dateRangeDefaultSetting.lastYearList"
                          :key="index"
                          :start='item.startDate'
                          :end='item.endDate'>
                </e-preset>
              </e-presets>
            </ejs-daterangepicker>
          </div>
          <!-- </el-form-item>
          </el-form> -->
        </el-card>
        <!-- <el-form :inline="true"
                v-else> -->
        <!-- <el-form-item v-loading='loading'> -->
        <div v-else style="display: flex; align-items: center">
          <div style="flex: none;margin-right: 10px" v-if="gadgetSetting.label">{{gadgetSetting.label}}</div>
          <ejs-daterangepicker
                               v-loading='loading'
                               :placeholder="$t('custom.marketbot.clientUsageReport.selectDate')"
                               style="width:100%;"
                               :start="gadgetSetting.dateRangeDefaultSetting.start"
                               :depth="gadgetSetting.dateRangeDefaultSetting.depth"
                               :minDays="gadgetSetting.dateRangeDefaultSetting.minDay"
                               :maxDays="gadgetSetting.dateRangeDefaultSetting.maxDay"
                               :format="gadgetSetting.dateRangeDefaultSetting.format"
                               v-model="searchDate"
                               @change="getDataListParams"
                               ref="daterange"
                               :strictMode="gadgetSetting.dateRangeDefaultSetting.selectionMode">
            <e-presets>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.toDay')"
                        :start='gadgetSetting.dateRangeDefaultSetting.toDayStartDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.toDayEndDate'>
              </e-preset>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.yesterDay')"
                        :start='gadgetSetting.dateRangeDefaultSetting.yesterDayStartDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.yesterDayEndDate'>
              </e-preset>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.thisWeek')"
                        :start='gadgetSetting.dateRangeDefaultSetting.weekStartDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.weekEndDate'>
              </e-preset>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.lastDayMonth')"
                        :start='gadgetSetting.dateRangeDefaultSetting.lastDayMonthStartDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.lastDayMonthEndDate'>
              </e-preset>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.lastDayQuarter')"
                        :start='gadgetSetting.dateRangeDefaultSetting.lastDayQuarterStartDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.lastDayQuarterEndDate'>
              </e-preset>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.lastBusinessDayWeek')"
                        :start='gadgetSetting.dateRangeDefaultSetting.weekStartBusinessDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.weekEndBusinessDate'>
              </e-preset>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.lastBusinessDayMonth')"
                        :start='gadgetSetting.dateRangeDefaultSetting.lastDayMonthStartBusinessDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.lastDayMonthEndBusinessDate'>
              </e-preset>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.lastBusinessDayQuarter')"
                        :start='gadgetSetting.dateRangeDefaultSetting.lastDayQuarterStartBusinessDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.lastDayQuarterEndBusinessDate'>
              </e-preset>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.currentMonthToToday')"
                        :start='gadgetSetting.dateRangeDefaultSetting.currentMonthToTodayStart'
                        :end='gadgetSetting.dateRangeDefaultSetting.currentMonthToTodayEnd'>
              </e-preset>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.currentSundayToToday')"
                        :start='gadgetSetting.dateRangeDefaultSetting.currentSundayToTodayStart'
                        :end='gadgetSetting.dateRangeDefaultSetting.currentSundayToTodayEnd'>
              </e-preset>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.lastWeek')"
                        :start='gadgetSetting.dateRangeDefaultSetting.lastWeekStartDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.lastWeekEndDate'>
              </e-preset>
              <e-preset :label="$t('custom.marketbot.clientUsageReport.thisMonth')"
                        :start='gadgetSetting.dateRangeDefaultSetting.monthStartDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.monthEndDate'>
              </e-preset>
              <e-preset :label="$t('custom.marketbot.clientUsageReport.lastMonth')"
                        :start='gadgetSetting.dateRangeDefaultSetting.lastMonthStartDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.lastMonthEndDate'>
              </e-preset>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.lastTwelveMonthStartDate')"
                        :start='gadgetSetting.dateRangeDefaultSetting.lastTwelveMonthStartDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.lastTwelveMonthEndDate'>
              </e-preset>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.thisQuarter')"
                        :start='gadgetSetting.dateRangeDefaultSetting.thisQuarterStartDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.thisQuarterEndDate'>
              </e-preset>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.lastQuarter')"
                        :start='gadgetSetting.dateRangeDefaultSetting.lastQuarterStartDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.lastQuarterEndDate'>
              </e-preset>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.thisYear')"
                        :start='gadgetSetting.dateRangeDefaultSetting.thisYearStartDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.thisYearEndDate'>
              </e-preset>

              <e-preset :label="$t('custom.marketbot.clientUsageReport.lastYear')"
                        :start='gadgetSetting.dateRangeDefaultSetting.lastYearStartDate'
                        :end='gadgetSetting.dateRangeDefaultSetting.lastYearEndDate'>
              </e-preset>
              <e-preset :label="item.label"
                        v-for="(item,index) in gadgetSetting.dateRangeDefaultSetting.lastYearList"
                        :key="index"
                        :start='item.startDate'
                        :end='item.endDate'>
              </e-preset>
            </e-presets>
          </ejs-daterangepicker>
        </div>
        <!-- </el-form-item>
        </el-form> -->

      </div>
    </Portal>
    <model :showSetting="queryModelDefaultSetting.showSetting"
           @queryModelClosed="queryModelClosed"
           :dataInfo="queryModelDefaultSetting.dataInfo"
           :updateGadget="upgradeGadgetSetting" />
  </div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
// import model from '@/components/gadget/query-model/query-model.vue'
import {
  getUrlQureyParams
} from '@/utils/common'
import moment from 'moment'
import { defaultGadgetSettingList } from '@/utils/data-json'
import { sqlSet } from '@/components/storybook/utilties/throttleRequest'
export default {
  mixins: [mixinGadgetViewModule],
  components: {
    model: () => import('@/components/gadget/query-model/query-model')
  },
  data () {
    let year = new Date().getFullYear()
    return {
      mixinViewModuleOptions: {
        pageId: this.pageId
      },
      gadgetStatus: 'init',
      searchDate: null,
      loading: false,
      gadgetSetting: {
        dateRangeDefaultSetting: {
          // toDayStartDate: moment.tz(moment.utc(new Date()).format(),this.$store.state.user.timezoneId).format('YYYY-MM-DD'),  //moment.tz(moment.utc(new Date()).format(),this.$store.state.user.timezoneId)
          // toDayEndDate: moment.tz(moment.utc(new Date()).format(),this.$store.state.user.timezoneId).format('YYYY-MM-DD'),
          toDayStartDate:this.dateConvert(moment().format()),
          toDayEndDate:this.dateConvert( moment().format()),
          yesterDayStartDate: this.dateConvert(moment().subtract(1, 'days').format()),
          yesterDayEndDate: this.dateConvert(moment().subtract(1, 'days').format()),
          lastDayMonthStartDate: this.dateConvert(moment().subtract('days', 30).format()),
          lastDayMonthEndDate:this.dateConvert(moment().subtract('days', 0).format()) ,
          lastDayQuarterStartDate: this.dateConvert(moment().subtract('days', 90).format()),
          lastDayQuarterEndDate: this.dateConvert(moment().subtract('days', 0).format()),
          weekStartBusinessDate: this.dateConvert( this.getLastBusinessDate(7, 'start')),
          weekEndBusinessDate: this.dateConvert(this.getLastBusinessDate(7, 'end')),
          lastDayMonthStartBusinessDate: this.dateConvert(this.getLastBusinessDate(30, 'start')),
          lastDayMonthEndBusinessDate: this.dateConvert(this.getLastBusinessDate(30, 'end')),
          lastDayQuarterStartBusinessDate: this.dateConvert(this.getLastBusinessDate(90, 'start')),
          lastDayQuarterEndBusinessDate: this.dateConvert(this.getLastBusinessDate(90, 'end')),
          currentMonthToTodayStart: (moment().startOf('month').format()),
          currentMonthToTodayEnd: this.dateConvert(moment().format()),
          currentSundayToTodayStart: (moment().startOf('week').format()),
          currentSundayToTodayEnd: this.dateConvert(moment().format()),
          lastWeekStartDate: (moment().week(moment().week() - 1).startOf('week').add(1, 'days')).format(),
          lastWeekEndDate: (moment().week(moment().week() - 1).endOf('week').add(1, 'days')).format(),
          weekStartDate: this.dateConvert(moment().subtract('days', 6).format()),
          weekEndDate: this.dateConvert(moment().subtract('days', 0).format()),
          monthStartDate: new Date(new Date(new Date().setDate(1)).toDateString()),
          monthEndDate:  this.dateConvert(new Date(new Date(new Date(new Date().setMonth(new Date().getMonth() + 1)).setDate(0)).toDateString())),
          lastMonthStartDate: moment().subtract(1, 'months').date(1).format(),
          lastMonthEndDate: moment().date(0).format(),
          lastYearStartDate: new Date(year - 1, 0, 1),
          lastYearEndDate: new Date(year - 1, 11, 31),
          thisYearStartDate: new Date(year, 0, 1),
          thisYearEndDate: new Date(year, 11, 31),
          thisQuarterStartDate: moment().startOf('quarter').format(),
          thisQuarterEndDate: moment().endOf('quarter').format(),
          lastQuarterStartDate: moment().quarter(moment().quarter() - 1).startOf('quarter').format(),
          lastQuarterEndDate: moment().quarter(moment().quarter() - 1).endOf('quarter').format(),
          lastTwelveMonthStartDate: moment().subtract(13, 'months').date(1).add(1, 'months').format(),
          lastTwelveMonthEndDate: moment().subtract(1, 'months').date(0).add(1, 'months').format(),
          lastYearList: []
        }
      },
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: 'dateRangeSlicer',
          gadgetSettingExclude: ['DATA'],
          gadgetSetting: this._.find(defaultGadgetSettingList, { gadgetType: 'dateRangeSlicer' }).gadgetSetting
          // gadgetSetting: {
          //   selectDate: 'weekStartDate',
          //   dateRangeDefaultSetting: {
          //     format: 'yyyy-MM-dd',
          //     start: '',
          //     depth: '',
          //     minDay: 0,
          //     maxDay: 0,
          //     minDate: new Date('10/1/2019'),
          //     maxDate: new Date('1/1/2025'),
          //     show: false,
          //     name: '',
          //     description: ''
          //     // defaultOneDate: false,
          //   }
          // }
        }
      },
      dateRangeForm: null,
      dateRangeTo: null,
      heightoffset: 60
    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.query()
    this.$store.state.isWidget = false
    this.getLastYearList()
    this.gadgetHeight = (this.gadgetInfo.h * 20) - this.heightoffset - 35
  },
  destroyed () {
    this.delQueryParam()
  },
  methods: {
    dateConvert(val){
     return this.$store.state.user.timezoneOffset.trim()==='+00:00'||this.$store.state.user.timezoneOffset.trim()==='00:00'?moment.utc(val).format().slice(0,-1): moment.tz(moment.utc(val).format(),this.$store.state.user.timezoneId).format().slice(0,-6)
    },
    getLastYearList () {
      var year = new Date().getFullYear()
      for (var i = 0; i <= 7; i++) {
        var temp = {
          label: (year - i).toString(),
          startDate: new Date(year - i, 0, 1),
          endDate: new Date(year - i, 11, 31)
        }
        this.gadgetSetting.dateRangeDefaultSetting.lastYearList.push(temp)
      }
    },
    resetslicer () {
      if (getUrlQureyParams(`${this.gadgetSetting.queryParams[0]}`) && getUrlQureyParams(`${this.gadgetSetting.queryParams[1]}`)) {
        this.dateRangeForm =getUrlQureyParams(`${this.gadgetSetting.queryParams[0]}`) 
        this.dateRangeTo = getUrlQureyParams(`${this.gadgetSetting.queryParams[1]}`)
        if(this.$store.state.user.timezoneOffset.trim() === '00:00'|| this.$store.state.user.timezoneOffset.trim()  === '+00:00') {
          this.searchDate = [(String(this.dateRangeForm)).slice(0,-1),(String(this.dateRangeTo)).slice(0,-1)]         
        } else {          
          this.searchDate = [(moment.tz(String(this.dateRangeForm), this.$store.state.user.timezoneId).format()).slice(0,-6),(moment.tz(String(this.dateRangeTo), this.$store.state.user.timezoneId).format()).slice(0,-6)]
        }      
      } else {
        // defaultOneDate: false,
        if (this.gadgetSetting.dateRangeDefaultSetting.defaultOneDate) {
          this.searchDate = [this.gadgetSetting.dateRangeDefaultSetting.toDayStartDate, this.gadgetSetting.dateRangeDefaultSetting.toDayEndDate]
        }
        if (localStorage.getItem(this.pageId + '-dateRangeSlicer-slicer')) {
          this.searchDate = JSON.parse(localStorage.getItem(this.pageId + '-dateRangeSlicer-slicer'))
        } else {
          let defaultDate = []
          if (this.gadgetSetting.selectDate) {
            switch (this.gadgetSetting.selectDate) {
              case 'toDayStartDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.toDayStartDate, this.gadgetSetting.dateRangeDefaultSetting.toDayEndDate]
                break
              case 'yesterDayStartDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.yesterDayStartDate, this.gadgetSetting.dateRangeDefaultSetting.yesterDayEndDate]
                break
              case 'lastDayMonthStartDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.lastDayMonthStartDate, this.gadgetSetting.dateRangeDefaultSetting.lastDayMonthEndDate]
                break
              case 'lastDayQuarterStartDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.lastDayQuarterStartDate, this.gadgetSetting.dateRangeDefaultSetting.lastDayQuarterEndDate]
                break
              case 'weekStartBusinessDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.weekStartBusinessDate, this.gadgetSetting.dateRangeDefaultSetting.weekEndBusinessDate]
                break
              case 'lastDayMonthStartBusinessDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.lastDayMonthStartBusinessDate, this.gadgetSetting.dateRangeDefaultSetting.lastDayMonthEndBusinessDate]
                break
              case 'lastDayQuarterStartBusinessDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.lastDayQuarterStartBusinessDate, this.gadgetSetting.dateRangeDefaultSetting.lastDayQuarterEndBusinessDate]
                break
              case 'currentMonthToTodayStart':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.currentMonthToTodayStart, this.gadgetSetting.dateRangeDefaultSetting.currentMonthToTodayEnd]
                break
              case 'currentSundayToTodayStart':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.currentSundayToTodayStart, this.gadgetSetting.dateRangeDefaultSetting.currentSundayToTodayEnd]
                break
              case 'weekStartDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.weekStartDate, this.gadgetSetting.dateRangeDefaultSetting.weekEndDate]
                break
              case 'lastWeekStartDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.lastWeekStartDate, this.gadgetSetting.dateRangeDefaultSetting.lastWeekEndDate]
                break
              case 'monthStartDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.monthStartDate, this.gadgetSetting.dateRangeDefaultSetting.monthEndDate]
                break
              case 'lastMonthStartDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.lastMonthStartDate, this.gadgetSetting.dateRangeDefaultSetting.lastMonthEndDate]
                break
              case 'lastTwelveMonthStartDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.lastTwelveMonthStartDate, this.gadgetSetting.dateRangeDefaultSetting.lastTwelveMonthEndDate]
                break
              case 'lastYearStartDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.lastYearStartDate, this.gadgetSetting.dateRangeDefaultSetting.lastYearEndDate]
                break
              case 'thisYearStartDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.thisYearStartDate, this.gadgetSetting.dateRangeDefaultSetting.thisYearEndDate]
                break
              case 'thisQuarterStartDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.thisQuarterStartDate, this.gadgetSetting.dateRangeDefaultSetting.thisQuarterEndDate]
                break
              case 'lastQuarterStartDate':
                defaultDate = [this.gadgetSetting.dateRangeDefaultSetting.lastQuarterStartDate, this.gadgetSetting.dateRangeDefaultSetting.lastQuarterEndDate]
                break
              case '0':
              case '1':
              case '2':
              case '3':
              case '4':
              case '5':
              case '6':
              case '7':
                var year = new Date().getFullYear()
                defaultDate = [new Date(year - this.gadgetSetting.selectDate, 0, 1), new Date(year - this.gadgetSetting.selectDate, 11, 31)]
                break
            }
            this.searchDate = defaultDate
          }
        }
      }
    this.getDataListParams()
    },
    getDataListParams () {
      var _self = this
      if (_self.searchDate && _self.searchDate.length >= 2) {
        sqlSet.clear()
        _self.slicer[this.gadgetSetting.queryParams[0]] = moment.tz((moment(_self.searchDate[0]).format('YYYY-MM-DD') + 'T00:00:00'), this.$store.state.user.timezoneId).utc().format()
        _self.slicer[this.gadgetSetting.queryParams[1]] = moment.tz((moment(_self.searchDate[1]).format('YYYY-MM-DD') + 'T23:59:59'), this.$store.state.user.timezoneId).utc().format()
        _self.slicer[`${this.gadgetSetting.queryParams[0]}0`] = moment(_self.searchDate[0]).format('YYYY-MM-DD') + 'T00:00:00Z'
        _self.slicer[`${this.gadgetSetting.queryParams[1]}0`] = moment(_self.searchDate[1]).format('YYYY-MM-DD') + 'T23:59:59Z'
        localStorage.setItem(_self.pageId + '-dateRangeSlicer-slicer', JSON.stringify(_self.searchDate))
      } else {
        delete _self.slicer[this.gadgetSetting.queryParams[0]]
        delete _self.slicer[`${this.gadgetSetting.queryParams[0]}0`]
        delete _self.slicer[this.gadgetSetting.queryParams[1]]
        delete _self.slicer[`${this.gadgetSetting.queryParams[1]}0`]
        localStorage.removeItem(this.pageId + '-dateRangeSlicer-slicer')
        return this.$message.error(this.$t('custom.marketbot.clientUsageReport.selectDate'))
      }
      this.updateGadgetStatus('ready')
    },
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetWidth = newWPx
      this.gadgetHeight = newH * 20 - this.heightoffset - 35
    },
    query () {
      this.loading = true
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      var _self = this
      const params = {
        // businessId: this.pageId,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        gadgetId: this.id,
        includeSql: false
      }
      this.$interface.reports.getReportSettingInfo(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return _self.$message.error(res.msg)
        }
        if (res.data) {
          _self._.merge(_self.gadgetSetting, res.data.gadgetSetting)
        }
        _self.resetslicer()
        //_self.updateGadgetStatus('ready') //! IMPORTANT must have this code in every gadget
        _self.loading = false
      }).catch(() => {
        _self.loading = false
      }).finally(() => {
        this.loading = false
        this.updateGadgetLoadingStatus(!this.loading)
      })
    },
    delQueryParam () {
      delete this.slicer[this.gadgetSetting.queryParams[0]]
      delete this.slicer[`${this.gadgetSetting.queryParams[0]}0`]
      delete this.slicer[this.gadgetSetting.queryParams[1]]
      delete this.slicer[`${this.gadgetSetting.queryParams[1]}0`]
    },
    getLastBusinessDate (day, key) {
      (key === 'end') && (day = 1)
      let nowDate = new Date()
      while (nowDate.getDay() % 6 === 0 || day-- > 1) {
        nowDate = new Date(nowDate.getTime() - 24 * 3600 * 1000)
      }
      return nowDate
    }
  }
}
</script>
<style scoped>
.el-form-item {
  margin-bottom: 0px;
}
</style>
